<template>
    <li style="list-style: none">
        <div @click="isCollapse = !isCollapse">
            <span>{{ model.name }}</span>
            <span v-if="model.children">{{ isCollapse ? '[+]' : '[-]' }}</span>
        </div>

        <ul v-if="model.children" v-show="!isCollapse">
            <Item :model="item" v-for="item in model.children" :key="item.id" />
        </ul>
    </li>
</template>

<script>
export default {
    name: 'Item',
    props: {
        model: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            isCollapse: true,
        };
    },
};
</script>
